<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 选择器 * 标签, 类, id */
    div{
      width: 300px;
      height: 200px;
      border: solid 1px #234;
    }
    /* 类选择器 */
    .bg{
      background: #258;
    } 
  </style>
</head>
<body>
  <div></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
  <script>
    //使用 JavaScript 修改 div 的背景颜色 
    //1. 获取 div 元素
    let div = document.querySelector('div');

    //2. 设置 div 的 style 属性
    // div.style.background = '#acf';
    // div.style.margin = '0 auto';

    // 设置 div 的 class 类名
    // div.className = 'bg';


    // console.log(_.random(0, 5));
    //声明一个函数, 获取随机的颜色值
    function getRandomColor(){
      return `rgb(${_.random(0, 255)},${_.random(0, 255)},${_.random(0, 255)})`;
    }
    /**
     * 练习: 点击 div 修改 div 的背景颜色
     */
    div.onclick = function(){
      //修改 div 的背景颜色
      // div.style.background = 'yellowgreen';
      // div.style.background = 'rgb(200,220,240)';
      //随机修改 div 的背景颜色
      div.style.background = getRandomColor();
    }

  </script>
</body>
</html>